<template>
    <view>
        <view class="preferential" v-for="(item,index) in indexAreaList" :key="index">
            <view class="spec-background" v-if="item.medicine_info.length>0">
                <view style="display: flex;justify-content:space-between;padding: 12px 19px 8px;color: white;">
                    <view style="display: flex;flex-direction: column;">
                        <text style="font-size: 16px;">{{item.name}}</text>
                    </view>
                    <view style="display: flex;align-items: center;">
                        <view @click="toShopGoodsList(item.id,item.name)" style="border: 1px solid #FFFFFF;padding: 5px;border-radius: 15px;font-size: 14px;">进去逛逛</view>
                    </view>
                </view>
                <view class="page-section-spacing">
                    <scroll-view class="scroll-view_H" scroll-x="true">
                        <!-- 遍历 -->
                        <view class="scroll-view-item_H" v-for="(goodsItem,goodsIndex) in item.medicine_info" :key="goodsIndex" @click="toGoodsDetail(goodsItem.id)">
                            <image class="item-img" :src="goodsItem.thumb_url||errImgUrl"></image>
                            <view class="no-wrap">{{goodsItem.name}}</view>
                            <view style="display: flex;justify-content: space-between;padding: 5px;font-size: 16px;">
                                <view style="color: red;">￥{{goodsItem.selling_price}}</view>
                                <image @click.stop="showCartModal(goodsItem.id)" style="width:20px;height: 20px;" src="../../static/mipmap-xhdpi/plus.png"></image>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>
        <cart-dialog :showModal="showModal" :goodsId="id" @hideCartModal="hideCartModal"></cart-dialog>
    </view>
</template>

<script>
import cartDialog from '../cart-dialog/cart-dialog.vue'
import {GoodsListPageType} from "../../utils/enum";
export default {
    components: {
        cartDialog
    },
    props: {

    },
    data() {
        return{
            showModal: false,
            errImgUrl: 'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/yaojike2020/images/other/loading_error.png',
            id: '',
            indexAreaList: []
        }
    },
    methods: {
        toShopGoodsList(id,name) {
            console.log(name)
            wx.navigateTo({
                /*url:'/pages/goodsList/goodListByShop?areaId='+id+'&name='+name*/
                url: `../goodsList/goodList?areaId=${id}&name=${name}&type=${GoodsListPageType.SHOP}`
            })
        },
        //显示购物车
        showCartModal(id){
            this.id = id;
            this.showModal = true;
            wx.hideTabBar()
        },
        //隐藏购物车
        hideCartModal(){
            this.id = ''
            this.showModal = false;
            wx.showTabBar()
        },

        //获取商店商品
        async getMerchantMedicineList(id,merchantId,index){
            let res=await this.$api.getMerchantMedicineList({
                merchant_id: merchantId,
                area_id: id,
                page: 1
            },this.$baseUrl);
            if(res.data.level=='success'){
                /*this.areaMerchantList = this.areaMerchantList.concat(res.data.data)*/
                this.indexAreaList[index].medicine_info = res.data.data.medicine_info
                this.$set(this.indexAreaList,index,this.indexAreaList[index]) //刷新视图
            } else{
                wx.showToast({
                    title: res.data.message,
                    icon: 'none',
                    duration: 1500
                })
            }
        },

        //获取首页专区
        async getIndexAreaList() {
            let merchant = wx.getStorageSync("merchant")
            let res = await this.$api.getIndexAreaList( {
                merchant_id: merchant.merchant_id,
            },this.$baseUrl)
            this.areaMerchantList = []
            if(res.data.level=='success'){
                let _this = this;
                this.indexAreaList = res.data.data;
                if(this.indexAreaList&&this.indexAreaList.length>0){
                    this.indexAreaList.forEach((item,index) => {
                        _this.getMerchantMedicineList(item.id,merchant.merchant_id,index)
                    })
                }
            }
        },

        //跳转商品详情
        toGoodsDetail(id) {
            wx.navigateTo({url: '/pages/goodsDetail/goodsDetail?id=' + id})
        },

    }
}
</script>

<style scoped lang="scss">
.preferential{
    padding: 0 12px;
    margin-bottom: 15px;
    .spec-background{
        width: 100%;
        background-image: url(../../static/home/test.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    .no-wrap{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        white-space: normal;
        font-size: 13px;
        padding: 0 5px;
        min-height: 13px;
    }

    .page-section-spacing {
        padding: 0 8px;
    }

    .scroll-view_H {
        white-space: nowrap;
        width: 100%
    }

    .scroll-view-item_H {
        display: inline-block;
        width: 110px;
        text-align: center;
        /* border: 1px solid #EEEEEE; */
        border-radius: 10rpx;
        margin-right: 10px;
        padding: 10px 10px 0;
        background-color: #FFFFFF;
        .item-img{
            width: 110px;
            height: 110px;
        }
    }
    .scroll-view-item_H:last-child{
        margin-right: 0;
    }
}
</style>
